<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>项目缴费</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
  <link rel="stylesheet" href="../../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
  <link rel="stylesheet" href="../../css/public.css" media="all">
  <style>
    .nam{
      /*自行车v不那么，*/
      width: 80px;
      font-size:16px;
      color: #737383;
      padding-left: 20px;
    }
    .sbb{
      width: 150px;
      text-align: center;
    }
    #repi{
      margin-top:60px;
      margin-left: 60px;
      height: 400px;
    }
    #pay{
      text-align: center;
      font-size: 16px;
      color: #737383;
      margin-top: 10px;
    }
    .inp{
      border: #CCCCCC solid 1px;
      height: 35px;
      border-radius: 3px;
      width: 200px;
    }
    #tibu{
      width: 100px;
      background-color:rgb(1,150,136);
      border: 0px;
      border-radius: 3px;
      margin-right: 20px;
      height: 30px;
      font-size: 14px;
      color: white;
      cursor: pointer;
    }
    #qubu{
      width: 100px;
      background-color:#CCCCCC;
      border: 0px;
      border-radius: 3px;
      margin-left: 20px;
      height: 30px;
      font-size: 14px;
      cursor: pointer;
    }
    #selinp1{
      width: 200px;
      height: 40px;
      border:solid #CCCCCC 1px;
      border-radius: 2px;
      margin-left: 20px;
    }
    #selbut1{
      width: 100px;
      height: 40px;
      background-color:rgb(1,150,136);
      color: white;
      border: 0px;
      border-radius: 2px;
    }
  </style>
</head>

<body>
<!--头部显示信息开始-->
<div>
  <form class="layui-form" method="post" id="dataFrm">
    <table style="margin-top: 20px;margin-left: 30px;">
      <tr>
        <td class="nam">姓名:</td>
        <td class="valu">
          <input id="reid" type="hidden" class="layui-input" readonly name="reportId"/>
          <input id="rename" class="layui-input" type="text" readonly name="reportName"/> </td>
        <td class="nam">身份证号:</td>
        <td class="valu"><input id="carid" class="layui-input" type="text" readonly name="carid"/> </td>
        <td class="nam">性别:</td>
        <td class="valu"><input id="resex" class="layui-input" type="text" readonly/> </td>
        <td class="nam">年龄:</td>
        <td class="valu"><input id="age" class="layui-input" type="text" readonly/> </td>
        <td rowspan="2" class="sbb">
          <input id="sbut" type="button" class="layui-btn layui-icon-add-circle-fine" value="开始收费">
        </td>
      </tr>
      <tr style="height: 10px"></tr>
      <tr style="height: 10px"></tr>
      <tr>
        <td class="nam">科室:</td>
        <td class="valu"><input class="layui-input" id="rede" type="text" readonly/> </td>
        <td class="nam">医生:</td>
        <td class="valu"><input class="layui-input" id="redo" type="text" readonly/> </td>
        <td class="nam">电话:</td>
        <td class="valu"><input class="layui-input"  id="phone" type="text" readonly/> </td>
        <td class="nam">挂号费:</td>
        <td class="valu"><input class="layui-input"  id="price" type="text" readonly/> </td>
        <td rowspan="3" class="sbb">
          <input id="sbut2" type="button" class="layui-btn layui-icon-add-circle-fine" value="确认收费">
        </td>
    </table>
  </form>
</div>
<!--头部显示信息结束-->

<!--病号信息弹出层开始-->
<div style="display: none;padding-top: 20px" id="peopleimgeDiv" >
  <div id="adddrug1">
    <input type="text" placeholder="请输入你要查询的信息" id="selinp1" autocomplete="off" >
    <input type="button" id="selbut1" value="查询"/>
  </div>
  <table class="layui-hide" id="userTable" lay-filter="userTable"></table>
  <div  id="userBar" style="display: none;">
    <a class="layui-btn layui-btn-xs" lay-event="edit">选择</a>
  </div>
</div>
<!--病号信息弹出层结束-->
<!--处方页面开始-->
<div id="repi">
  <table class="layui-hide" id="repiid" lay-filter="repiid"></table>
</div>
<!--处方页面结束-->
<!--添加药品数量开始-->
<div id="drugnum" style="text-align: center;display: none">
  <input type="number" id="num" style="height: 25px;width:200px;margin-top: 15px;" placeholder="请输入数量" autocomplete="off">
  <input type="hidden" id="kunum"><!--药品库存数量-->
  <input type="hidden" id="mename"><!--药品名字-->
  <input type="hidden" id="sellingPrice"><!--药品单价-->
  <span id="uni"></span><br/><br/><br/><br/>
  <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" id="addru">提交</button>
  <button type="button" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh layui-icon-delete" id="clo" >取消</button>
</div>
<!--添加药品数量结束-->
<!--收费页面开始-->
<div id="pay" style="display: none">
  应收金额:&nbsp;&nbsp;&nbsp;&nbsp;<input class="inp" id="money" readonly type="text" >元<br/><br/>
  已收金额:&nbsp;&nbsp;&nbsp;&nbsp;<input class="inp" id="monee" type="number">元<br/><br/>
  应找零头:&nbsp;&nbsp;&nbsp;&nbsp;<input class="inp" id="moneee" readonly type="text">元<br/><br/><br/>
  <input id="tibu" type="button" value="提交"><input id="qubu" type="button" value="取消">
</div>
<!--收费页面结束-->
</body>

<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>

<script type="text/javascript" >
  var tableIns;
  var hua;
  var xinagmu;
  var people;
  layui.use([ 'jquery', 'layer', 'form', 'table' ], function() {

    var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;
    var table = layui.table;
    //查询患者信息表
    var mainIndex;
    $("#sbut").click(function(){
      mainIndex=layer.open({
        type:1,
        title:'选择病人',
        content:$("#peopleimgeDiv"),
        area:['1300px','500px'],
        success:function(index){
          people=table.render({
            elem: '#userTable'   //渲染的目标对象
            ,url:'/web/caocc/selpreson' //数据接口
            ,title: '用户数据表'//数据导出来的标题
            ,cellMinWidth:200 //设置列的最小默认宽度
            /*,parseData:function(res){
                 return{
                     "code":0,//如果不用分页后台没有用分页设置code:0的话需要加上这句话
                     data:res//要不然会报会报返回的数据类型不符合规范
                 }
             }*/
            ,page: 1  //是否启用分页, limits: [10, 20, 30]
            ,limits: [5, 10, 15]
            ,limit: 5//默认采用3
            ,cols: [[   //列表数据
              {field:'reportId', title:'单据号',align:'center',width:"8%"}
              ,{field:'reportName', title:'姓名',align:'center',width:"8%"}
              ,{field:'phone', title:'电话',align:'center',width:"8%"}
              ,{field:'carid', title:'身份证号',align:'center',width:"8%"}
              ,{field:'sex', title:'性别',align:'center',width:"8%"}
              ,{field:'age', title:'年龄',align:'center',width:"8%"}
              ,{field:'department', title:'科室',align:'center',width:"8%"}
              ,{field:'doctorName', title:'医生',align:'center',width:"8%"}
              ,{field:'type', title:'挂号类别',align:'center',width:"8%"}
              ,{field:'time', title:'挂号时间',align:'center',width:"8%"}
              ,{field:'price', title:'挂号费',align:'center',width:"8%"}
              ,{fixed: 'right', title:'操作', toolbar: '#userBar',align:'center',width:'8%'}
            ]]
          })
        }
      });
    });
    //监听患者行工具事件
    table.on('tool(userTable)', function(obj){
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      if(layEvent === 'edit'){ //编辑
        $("#reid").val(data.reportId)
        $("#rename").val(data.reportName)
        $("#resex").val(data.sex)
        $("#age").val(data.age)
        $("#rede").val(data.department);
        $("#redo").val(data.doctorName);
        $("#carid").val(data.carid);
        $("#phone").val(data.phone);
        $("#price").val(data.price);
        var perid=data.reportId;
        //查询该用户的处方
        layer.close(mainIndex)
        wareid=data.value;//获取选中的药房的id
        hua=table.render({
          elem: '#repiid'   //渲染的目标对象
          ,url:'/web/xpay/selxiang?perid='+perid //数据接口
          ,title: '患者项目'
          ,cellMinWidth:200 //设置列的最小默认宽度
          ,page: 1  //是否启用分页, limits: [10, 20, 30]
          ,limits: [5, 10, 15]
          ,limit: 5//默认采用3
          ,cols: [[   //列表    数据
            {field:'durgname', title:'药品名称',align:'center',width:"20%"}
            ,{field:'durgnum', title:'数量',align:'center',width:"20%"}
            ,{field:'repiceprice', title:'单价',align:'center',width:"20%"}
            ,{field:'repicetotal', title:'小计',align:'center',width:"20%"}
            ,{fixed: 'right', title:'状态',align:'center',width:'20%',templet:function(d){
                return d.ostate=='0'?'<font color=blue>非检查</font>':'<font color=red>需检查</font>';
              }}
          ]]
        })
      }
    });
    //打开收费页面
    $("#sbut2").click(function(){
      var reid=$("#reid").val();
      if(reid==''){
        layer.msg("请选择患者后在收费");
      }else{
        $.post("/web/xpay/selshoux",{"perid":reid},function(res){
          if(res==0||res==''){
            layer.msg("请添加收费项目");
          }else{
            mainIndex=layer.open({
              type:1,
              title:'确认收费',
              content:$("#pay"),
              area:['400px','350px']
            })
            $("#money").val(res);
          }
        })
      }
    })
    //键盘点击事件
    document.onkeyup = function (e) {
      //alert("Key: "+event.keyCode)
      var y=$("#money").val();
      var j=$("#monee").val();
      var z=j-y;
      $("#moneee").val(z);
    }
    //提交收费
    $("#tibu").click(function(){
      var r=$("#monee").val();
      var z= $("#moneee").val();
      var reid=$("#reid").val();//获取用户id
      var price=$("#price").val();//获取挂号费
      if(z>=0 && r!=''){
        layer.msg("缴费成功");
        location.reload();
        //修改用户状态变成已缴费
        // $.post("/web/xpay/shoufei",{"perid":reid},function(res) {
        //   //5秒后跳转也面
        //   setTimeout(function(){
        //     location.href="/web/xpay/xiangpay";
        //   },1000)
        // })
      }else{
        layer.msg("请缴费")
      }
    })
    //关闭缴费页面
    $("#qubu").click(function(){
      $("#money").val("");
      $("#monee").val("");
      $("#moneee").val("");
      layer.close(mainIndex)
    })
    //用户模糊查询
    $(document).on('click',"#selbut1",function(){
      var durgname=$("#selinp1").val()
      people.reload({
        url:"/web/caocc/mohu?durgname="+durgname
      })
    });
  })
</script>
</html>